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Frontend Development 


HTML. (27 


e IDOCTYPE 

e Block & Inline elements 
- Tags & Attributes 

- Head & Title 

e Imports (script, style...) 
e Headings 

e Tables 


CSS E) 


e Selectors 
e basic 
e combinational 
e Psuedo 
e selectors 
e elements 
e Specificity 
e Inheritance 


JavaScript is 


e Primitives 

e Scopes & Hoisting 

e Closures 

e Execution context 

e Variables (var, let, const) 
e Operators 

e Type Conversions 


Interview Checklist & Roadmap 


e Anchors & navigation 

e Lists (unordered +ordered) 
- Forms & Input types 

e Events basics 

> Images 

e Semantic HTML 

e Local & Session storage 


Box model 

Fonts & Typography 
Colors 

Positioning 

Units (absolute + relative) 
Overflow 

Float 

Display & Flex 


- Arrays + methods 

e Objects + methods 

e Functions + Arrow functions 
s Try Catch & Error handling 

e Strict mode 

e Timeout & Interval 

e Classes 


Web Fundamentals T 


e Client Server architecture e Authentications 
e HTTP e Cookies & Sessions 
e RESTful web services e Security 
e Communication e XSS 
e Polling e CORS 
e Web sockets e CSP 
> XML & JSON e Caching & compression 
e HTTPs & SSL e HTTP 2.0 


BOM & DOM c'a 


e DOM Tree °- Attribute manipulation 
e Accessing DOM * AJAX & Fetch 

e Node creation & deletion e Event Loop 

e Element selectors * Shadow DOM 

e Events handling e CSSOM 

e Events listeners e Critical Rendering Path 
* Event bubbling & delegation e Browser APIs 

e |terating Nodelist e Browser Internals 


Version Control 25 


e Git and Github e Branching 

e Clone e Merge 

e Pull & Fetch e Rebase 
e Commit e Workflow 
e Log e Cherry pick 
* Push e Stash 

e Reset * Squash 

e Restore e Revert 


e Switch & Checkout e Tags 


ADVANCED 


React (oe 


e Components & JSX 
- State & Props 


e Class components & life cycle 


e Functional components 
e Hooks 
e useState 
e useEffect 
e useRef 
e Render props 
e Forward refs 


React Ecosystem 


- Zustand / Redux 
- React Router 


- Styled Components / Emotion 


- Material React 

- React Hook Form 
- Axios 

- Tanstack Query 


HTML E 


e Meta tags 
e Search Engine Optimization 
e Responsive images 
e Multimedia 
e Audio 
> Video 
e SVG animations 
e Web Components 


S 


e Event handling 

e Forms 

e React.lazy 

e Context API 

e Higher order components 

e Advanced & Custom hooks 
e Portals 

e Error boundaries 

e Reconciliation 

e React internals 


s Framer Motion 

e React intl 

e Jest 

e React Testing Library 
e GraphQL 

e Apollo client 

e NextJS 


e IndexedDB 
s iFrame 

e Canvas 

e WebGL 

e Workers 


e web worker 
e service worker 
e shared worker 


ADVANCED 


ADVANCED 


css E 


e Shadows 

e Gradients 

e: Background images 
e Masking & blending 
e CSS functions 

e Media Queries 

e Transforms 

- Transitions 

e Animations 


JavaScript IS 


e “this” keyword 

e Template strings 
e De-structuring 

e Rest & Spread 

e Callbacks 

e Promises 

e Async Await 

e Prototypes 

e Modules 


Frontend Concepts 


e Progressive Web App 
e Object Oriented Programming 
e Functional Programming 
e Reactive Programming 

- Test Driven Development 
e Accessibility & Usability 

e Web Performance 

= CSR, SSR, SSG, ISR 


s Flex advanced 

e CSS Grids 

e CSS sprites 

e CSS variables & counters 
e Container queries 

e Subgrid 

e BEM standards 

e Responsive web design 


e Sets & Weaksets 

e Maps & Weakmaps 

e Regular expressions 

e Symbols 

e Proxy & Reflect 

e Iterators + Generators 
e Dates & Intl 

e Typed Arrays 

- ES Next features 


e Web Security 

e Design patterns 
e JAM Stack 

e Micro frontend 
e User Experience 
e CI/CD 

- Web Assembly 
e Web 3.0 


Recommended Tools 


Editor Browser Version Control Language 


x< © © 
VS Code Chrome Git TypeScript 
Task Runner Commit Hook Bundler 
npm CD v 
npm | Yarn Husky ViteJS | Webpack 
© Vv 
ESlint Stylelint 
= 
Prettier 
Popular Tech & Tools 
e SASS e RxJS e Storybook 
e Tailwind CSS * D3JS e Cypress 
- Bootstrap e XState e Vitest 
e PostCSS * StencilJS e Playwright 
Ant °. Lit Element - TestCafe 


Y 


VueJS 


H 


Angular 


e ThreeJS 
e Electron 
e ESBuild 
e Babel 

e SWC 


Oo 8&8 


Svelte SolidJS 


e Remix 
e Gatsby 
e Astro 

e NodeJS 
e Deno 


Preact 


e Docker 

s Nx 

e Lerna 

e Turbo Repo 
e SingleSPA 
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Intermediate Track 
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Typescript Nevis HTML CSS JS Web security 
Advanced & performance 
o 
Created 3 NEVET. ege seess TE 
By Ends... 


Sadanand Pai Design Patterns 


For Frontend Materials, 


This document is a guideline based on personal knowledge & opinions 


